import React, { useCallback, useMemo, useState } from 'react'
import { Slider, Text, View } from '@tarojs/components'
import { getPlatform } from '@UTILS/common'
import style from './ScaleContent.module.scss'

const MIN_VALUE = 0
const BLOCK_WIDTH = 22
const STEP = 1
const { isWX } = getPlatform()

const ScaleContent = ({
  data, answerChoice, language, onSelect, disabled, isPain, showBubble, containerStyle,
  sliderStyle, contentStyle, textStyle, descTipStyle, topTextStyle,
  blockSize = BLOCK_WIDTH, initialWidth = 12, widthOffset
}) => {
  const MAX_VALUE = data.length - 1
  const [val, setVal] = useState(Number(answerChoice) || MIN_VALUE)

  const text = useMemo(() => (data[val]?.Text?.[language] || ''), [data, language, val])
  const Comp = useMemo(() => (isPain ? PainScale : GeneralScale), [isPain])
  const bubbleStyle = useMemo(() => ({
    width: `calc(100% - ${widthOffset || (isWX ? 56 : 64)}px)`,
    marginBottom: `${isWX ? 7.5 : 12}px`,
  }), [widthOffset])
  const onChanging = useCallback(e => setVal(e.detail.value), [])

  const onChangeSlider = useCallback(e => {
    const { value } = e.detail
    setVal(value)
    onSelect?.(value)
  }, [onSelect])

  return (
    <View className={`${containerStyle || (isPain ? style.painScaleBox : style.scaleBox)}`}>
      {isPain && (
        <View className={`${topTextStyle || style.topText}`}>
          <Text className={style.title}>{text}</Text>
        </View>
      )}
      {showBubble && (
        <View
          className={style.bubbleBox}
          style={bubbleStyle}
        >
          <View
            className={`${style.bubble} ${isWX ? style.bubbleWX : ''}`}
            style={{ left: `${(val / MAX_VALUE) * 100}%`, marginLeft: `${initialWidth}px` }}
          >
            <Text className={style.bubbleText}>{val}</Text>
            <View className={style.bubbleBottom} />
          </View>
        </View>
      )}
      <Slider
        disabled={disabled}
        className={`${sliderStyle || (isWX ? style.sliderWX : style.slider)}`}
        min={MIN_VALUE}
        max={MAX_VALUE}
        step={STEP}
        blockSize={blockSize}
        activeColor={isPain ? 'transparent' : '#47C690'}
        backgroundColor={isPain ? 'transparent' : '#E8E8E8'}
        value={val}
        onChange={onChangeSlider}
        onChanging={onChanging}
      />
      <Comp
        data={data}
        val={val}
        showValue={!showBubble}
        textStyle={`${textStyle || (isWX ? style.textWXTip : style.textTip)}`}
        descTipStyle={`${descTipStyle || style.descTip}`}
        contentStyle={`${contentStyle || (isWX ? style.blockWXTip : style.blockTip)}`}
      />
    </View>
  )
}

const PainScale = ({
  val, data, contentStyle, textStyle, descTipStyle
}) => {
  const MAX_VALUE = 10
  const EmptyArray = useMemo(() => new Array(MAX_VALUE).fill(0), [MAX_VALUE])
  if (!data?.length) return null
  return (
    <>
      <View className={contentStyle}>
        {
          EmptyArray.map((t, idx) => (
            <View key={`${t}_${idx}`} className={style.blockBox}>
              <View className={`${style.painBlock} ${style[`bgColor${idx}`]}`}>
                {idx >= val && <View className={style.disabledBlock} />}
              </View>
            </View>
          ))
        }
      </View>
      <View className={textStyle}>
        {
          data.map(({ Label }, idx) => (
            <Text key={`pain_${idx}`} className={`${style.tip} ${idx > 9 ? style.twoLetter : ''}`}>{Label}</Text>
          ))
        }
      </View>
      <View className={descTipStyle}>
        <Text>无痛</Text>
        <View className={style.four}>
          <View className={style.topBox} />
          <View className={style.circlePoint} />
          <Text className={style.descText}>影响睡眠</Text>
        </View>
        <View className={style.seven}>
          <View className={style.topBox} />
          <View className={style.circlePoint} />
          <Text className={style.descText}>难以入睡</Text>
        </View>
        <Text>剧痛</Text>
      </View>
    </>
  )
}

const GeneralScale = ({
  val, data, contentStyle, textStyle, showValue
}) => {
  if (!data?.length) return null
  return (
    <>
      <View className={contentStyle}>
        {
          data.map((item, idx) => (
            <View key={`general_${idx}`} className={`${style.topCircle} ${val > idx ? style.active : ''}`} />
          ))
        }
      </View>
      <View className={textStyle}>
        {
          data.map(({ Label }, idx) => (
            <Text
              key={`seq_${idx}`}
              className={`${style.tip} ${idx > 9 ? style.twoLetter : ''} ${(showValue && val === idx) ? style.boldText : ''}`}
            >
              {Label}
            </Text>
          ))
        }
      </View>
    </>
  )
}

export default ScaleContent
